<script setup>
import { ref} from "vue";

const isshow = ref(false);

const open = () => {
  isshow.value = true;
};

const close = () => {
  isshow.value = false;
};

const emit = defineEmits('submit')

const SubmitClick = () =>{
    emit("submit")
}

const isLoading = ref(false)

const isLoading1=()=>{
    isLoading.value = true
}

const isLoading2=()=>{
    isLoading.value = false
}


const props = defineProps({
  title: {
    type: String,
    default: "派大星"
  },
  closeOnOlickModal: {
    type: Boolean,
    default: true
  },
  DestroyOnClose: {
    type: Boolean,
    default: false
  },
  Direction: {
    type: String,
    default: "rtl"
  },
  size: {
    type: Number,
    default: "40%"
  }
});

defineExpose({
  open,
  close,
  isLoading1,
  isLoading2
});
</script>


<template>
  <el-drawer
    v-model="isshow"
    :title="title"
    :close-on-click-modal="closeOnOlickModal"
    close-on-press-escape
    :destroy-on-close="DestroyOnClose"
    :direction="Direction"
    :size="size"
    class="top"
  >
    <div class="box1">
      <slot name="changeContent"></slot>
    </div>

    <div class="btu">
      <el-button type="primary" size="default" @click="SubmitClick" :loading="isLoading">确定</el-button>
      <el-button size="default" @click="close">取消</el-button> 
    </div>
  </el-drawer>
</template>

<style scoped>
.box1{
    width: 100%;
    height: 95%;
    overflow-y: auto;
    margin: 0 auto;
}
.top{
    position: relative;
}
.btu{
    /* position: absolute; */
    bottom: 0;
}
</style>